extends layout
append styles
    style .class1 { background: #444; color: #eee; }
append scripts
    script.
        var vm = new Vue({
            el: '#app',
            data: {
                click: true, // 这里的 true 传到了 v-mode="click" 中, 所以初始就是选中的, checkbox 可以影响这个值
                html: '<h1>菜鸟教程</h1>',
                url: 'https://www.baidu.com',
                message: 'run jrp'
            },
            methods: {
                reverseMessage: function() {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        });
        console.log(vm.url);  // 可以进行修改 data:{} 中的属性
        console.log(vm.$el);
        vm.$el = document.getElementById('app')
block content
    //- v- 前缀的特殊属性, 指令用于在表达式的值改变时, 将某些行为应用到 DOM 上; 参数在指令后以冒号指明
    #app
        //- ================================================================
        //- v-bind 指令被用来响应地更新 HTML 属性, 包括 id, class 等; input(type="checkbox") 的 v-mode 对应这 checked, 这里进行了双向绑定
        p 勾选右边复选框, 修改下面 div 颜色 #[input#r1(type="checkbox" v-model="click")]
        div(v-bind:class="{class1: click}") directiva v-bind:class
        //- Vue.js v-bind 在处理 class 和 style 时, 专门增强了它, 表达式的结果类型除了字符串之外, 还可以是对象或数组
        //- 我们可以为 v-bind:class 设置一个对象, 当为 class=class1 时, 可以使用 styles 中对应的 .class1
        //- ================================================================
        //- v-html 指令用于输出 html 代码, 和 {{}} 效果差不多, 只是多了一个转换过程
        div(v-html="html")
        //- ================================================================
        //- {{}} 是进行单向绑定, 只能修改 data.message; v-model 进行双向数据绑定
        //- v-mode 会根据控件类型自动选取正确的方法来更新元素, 类似于 input(value="")
        p {{ message }}
        input(v-model="message")
        input(type="button", v-model="message")
        //- ================================================================
        // v-on 指令用于监听 DOM 事件; 因为函数里指明了 this.message, 所以会改变 data.message, 当有 {{message}} 和 v-model="message" 同时绑定着
        button(@click="reverseMessage") 反转字符串
        //- button(v-on:click="reverseMessage") 反转字符串 //- v-on 的缩写
